<template>
    <div>
        <el-card class="box-card">
        <div class="block">
        <span class="demonstration">发货地：</span>
        <el-cascader
            :options="options1"
            v-model="value1"
        ></el-cascader>
        </div>
        <div class="block1">
        <span class="demonstration">发货地：</span>
        <el-cascader
            :options="options2"
            v-model="value2"
            ></el-cascader>
        </div>
        <div class="block3">
            <span class="demonstration">请选择发货—收货时间：</span>
            <el-date-picker
            v-model="value3"
            type="daterange"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss" 
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-button type="success" @click="handleChange" class="block4">确认</el-button>
        </div>
        </el-card>
        
        <el-card class="box-card1" v-if="show">
            <span class="abc">最高温度：{{max_temp}}  °/c</span><span class="abc1">最低温度：{{min_temp}}  °/c</span><span class="abc2">最长时长：{{max_time}}  h</span><span class="abc3">最短时长：{{min_time}}  h</span><span class="abc4">平均时长：{{ping_time}}  h</span>
        </el-card>
        <div>
            <div id="test-map"></div>
        </div>
        <div id='sdf' v-if="show">
            <span class="abc">总运单数：{{order_num}} 单</span>
            <el-table
				:data="allTableData"
				border
				style="width: 100%">
				<el-table-column
					type="index"
					label="序号"
					align='center'
					sortable
					width="198">
				</el-table-column>
                <el-table-column
					label="发货单号"
					align='center'
					width="300">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.order }}</span>
					</template>
				</el-table-column>
                <el-table-column
					label="设备类型"
					align='center'
					width="300">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.lable_type }}</span>
					</template>
				</el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import{city,order_in} from '../../api/api.js'
import { lazyAMapApiLoaderInstance } from 'vue-amap'
export default {
        data() {
        return {
            pickerOptions: {
            shortcuts: [{
            text: '最近一周',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
            }
            }, {
            text: '最近一个月',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
            }
            }, {
            text: '最近三个月',
            onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
            }
            }]
            },
            value1: [],
            value2: [],
            value3:[],
            options1: [],
            options2: [],
            max_time:0,
            min_time:0,
            max_temp:0,
            min_temp:0,
            ping_time:0,
            order_num:0,
            path: [
                {
                path: [
                    [],
                    [],
                ]
                }
            ],
             map: '', // 地图

            address1:0,
            address2:0,
            show:'',
            allTableData:[],
        };
        },
        methods: {
            handleChange() {
                console.log(this.value1,this.value2,this.value3);
                if (this.value1!=''){
                    var params = {
                    list1 : JSON.stringify(this.value1),
                    list2 : JSON.stringify(this.value2),
                    list3 : JSON.stringify(this.value3),
                    };
                    order_in(params).then(res=>{
                        // this.$message(res)
                        console.log(res)
                        this.show = '是'
                        this.allTableData = res['yundan']
                        console.log(this.allTableData)
                        this.address1 = (parseFloat(res['delivery_address'].split(',')[0]))
                        this.address2 = (parseFloat(res['delivery_address'].split(',')[1]))
                        this.path[0].path[0].push(parseFloat(res['send_adress'].split(',')[0]))
                        this.path[0].path[0].push(parseFloat(res['send_adress'].split(',')[1]))
                        this.path[0].path[1].push(parseFloat(res['delivery_address'].split(',')[0]))
                        this.path[0].path[1].push(parseFloat(res['delivery_address'].split(',')[1]))
                        console.log(this.path[0].path)
                        this.max_time = res['max_time']
                        this.min_time = res['min_time']
                        this.max_temp = res['max_temp']
                        this.min_temp = res['min_temp']
                        this.ping_time = res['ping_time']
                        this.order_num = res['order_num']
                        lazyAMapApiLoaderInstance.load().then(() => {
                        this.map = new AMap.Map('test-map', {
                            // zooms: [13, 18], // 地图缩放范围
                            center: new AMap.LngLat(this.address1, this.address2)
                        })
                        AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
                            if (!PathSimplifier.supportCanvas) {
                            alert('当前环境不支持 Canvas！')
                            return
                            }
                            // 创建组件实例
                            var pathSimplifierIns = new PathSimplifier({
                            map: this.map,
                            zIndex: 100, // 图层叠加顺序
                            data: this.path, // 巡航路径
                            // 获取巡航路径中的路径坐标数组
                            getPath: (pathData, pathIndex) => {
                                return pathData.path
                            }
                            })
                            // 创建巡航器
                            var pathNavigator = pathSimplifierIns.createPathNavigator(0, {
                            loop: true, // 是否循环
                            speed: 2000 // 速度(km/h)
                            })
                            pathNavigator.start()
                        })
                    })
                        
                    })
                }else{
                    this.$message("请选择发货地、收货地以及开始和结束时间")
                }
                
            },
            //获取城市信息
            get_city(){
                var params = {
                };
                city(params).then(res=>{
                    this.options1 = res
                    this.options2 = res
                    console.log(this.options)
                })
            }
        },
        created() {
            this.get_city()
            
        },
}

</script>

<style>
#sdf{
        height:1000px;
        width:800px;
        float: right;
        margin-top: 100px; 
        margin-right: 10px;

    }
#test-map{
    margin-top: 100px;
    height:500px;
    width:700px;
    float: left;
  }
.block{
    float: left;
}
.block1{
    margin-left: 30px;
    float: left;
}
.block3{
    margin-left: 650px;

}
.block4{
    margin-left: 150px;

}
.box-card1{
    margin-top: 50px;
}
.abc1{
    margin-left: 190px;

}
.abc2{
    margin-left: 190px;

}
.abc3{
    margin-left: 190px;

}
.abc4{
    margin-left: 190px;

}
</style>